<!-- @module travel-form -->
<!-- @author: YunTao.Li -->
<!-- @description:  申诉单form组件-->
<!-- @since: 2019-11-19 12:47:36 -->
<template>
  <el-dialog class="dialogStyle" title="考勤申诉" :visible.sync="dialogFormVisible" width="90%" top="5vh" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" @close="closeDialog">
    <el-form ref="appealInputForm" :model="appealInputForm" prop="appealInputForm" :rules="formFormatRules" :label-position="labelPosition" label-width="120px" size="mini" :disabled="true">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
          <el-form-item label="组织机构" prop="orgCode">
            <!-- <el-input v-model="appealInputForm.orgCode" name="orgCode" placeholder="组织机构" /> -->
            <OrgSelectTree ref="orgSelectRef" v-model="appealInputForm.orgCode" :value="appealInputForm.ouId" name="orgCode" placeholder="组织机构" @bindLabel="bindLabel" />
            <!-- {{ appealInputForm.orgName }} -->
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
          <el-form-item label="申请单编码" prop="explainCode">
            <el-input v-model="appealInputForm.explainCode" name="explainCode" placeholder="保存后自动生成" :disabled="true" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
          <el-form-item label="月份" prop="periodCode">
            <el-date-picker v-model="appealInputForm.periodCode" style="width:100%;" type="date" name="periodCode" placeholder="月份" value-format="yyyy-MM" format="yyyy-MM" />
          </el-form-item>
        </el-col>
        <!-- <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
          <el-form-item label="员工姓名" prop="empCode">
            <EmpCombobox v-model="appealInputForm.empCode" name="empCode" placeholder="员工姓名" />
          </el-form-item>
        </el-col> -->
      </el-row>
    </el-form>

    <!--button-->
    <div class="div-button">
      <el-button
        icon="el-icon-menu"
        :disabled="true"
        type="success"
        size="mini"
        @click="onAttenceSelect"
      >新增</el-button>
    </div>

    <!-- table begin-->
    <div class="div-table">
      <fieldset class="fieldset" style="margin-top:15px;">
        <legend class="legend-font" v-text="text_grid" />
        <el-table :data="appealInputForm.attendanceAppealDetailList" border fit highlight-current-row style="width: 100%" max-height="350" size="mini">
          <el-table-column align="center" type="index" width="55" label="序号" />
          <!--考勤日期-->
          <el-table-column align="center" label="考勤日期" width="150px">
            <template slot-scope="scope">
              <span>{{ scope.row.attendDate | parseTime('{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <!--时段 1-上午，2-下午，3-全天'-->
          <el-table-column align="center" label="时段" width="80px" prop="timeType" :formatter="dictFormatter" label-class-name="timeType">
            <!-- <template slot-scope="scope">
              <span>{{ scope.row.timeType }}</span>
            </template> -->
          </el-table-column>
          <!--实际打卡时间-->
          <el-table-column width="100px" align="center" label="实际打卡时间">
            <template slot-scope="scope">
              <span>{{ scope.row.signDate }}</span>
            </template>
          </el-table-column>
          <!--考勤状态 SIGN_STATUS 0:正常  1:异常  2:漏签-->
          <el-table-column prop="signStatus" :formatter="dictFormatter" label-class-name="signStatus" align="center" label="考勤状态" width="100px">
            <!-- <template slot-scope="scope">
              <span>{{ scope.row.signStatus }}</span>
            </template> -->
          </el-table-column>
          <!--申诉原因-->
          <el-table-column label="申诉原因" align="center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.explainDesc" size="mini" class="edit-input" placeholder="申诉原因" type="textarea" :disabled="true" />
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80px">
            <template scope="scope">
              <el-button size="mini" type="danger" :disabled="true" @click="onDetailDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </fieldset>
    </div>
    <!-- table end -->
    <fileUpload :param-pa-doc-id="appealInputForm.fileParamPaDocId" :disable-upload-button="true" :disable-delete-button="true" />
    <!-- <fileUpload :test-pa-doc-id="appealInputForm.explainId" /> -->
    <attenceExceptionSelector ref="attenceExceptionSelector" append-to-body @submitFunc="onAddDetail" />
    <div slot="footer" class="dialog-footer" style="margin:10px;text-align: center">
      <el-button size="mini" @click="onCancel">关 闭</el-button>
      <!-- <el-button type="primary" size="mini" @click="onSubmit">保存</el-button> -->
    </div>
  </el-dialog>

</template>

<script>
import attenceExceptionSelector from './../select/attence-exception-selector'
import { appealDetailList } from '@/api/attendance/appeal-service'
import fileUpload from './../fileupload'
import { createUniqueString } from '@/utils'
import OrgSelectTree from './../combo/org-tree-select.vue'
// import EmpCombobox from '@/views/attendance/components/combo/emp-comb'

export default {
  components: { attenceExceptionSelector, fileUpload, OrgSelectTree },
  data() {
    return {
      dialogFormVisible: false,
      labelPosition: 'right',
      text_grid: '考勤记录',
      appealInputForm: {
        bizTravelId: '',
        ouId: '',
        orgCode: '',
        orgName: '',
        explainId: '',
        explainCode: '',
        periodCode: '',
        empId: '',
        empCode: '',
        empName: '',
        deptCode: '',
        deptName: '',
        fileParamPaDocId: '',
        attendanceAppealDetailList: []
      },
      formLabelWidth: '120px',
      formFormatRules: {
        orgCode: [{
          required: true,
          message: '组织机构不能为空',
          trigger: 'blur'
        }],
        periodCode: [{
          required: true,
          message: '月份不能为空',
          trigger: 'blur'
        }]
      }
    }
  },
  mounted() {
    try {
      this.appealInputForm.empCode = localStorage.getItem('empCode')
      this.appealInputForm.empName = localStorage.getItem('empName')
      this.appealInputForm.deptCode = localStorage.getItem('deptCode')
      this.appealInputForm.deptName = localStorage.getItem('deptName')
    } catch (e) {
      console.log(e)
    }
  },
  methods: {
    bindLabel(orgId, label) {
      if (orgId && orgId !== '') {
        this.appealInputForm.ouId = orgId
      }

      if (label && label !== '') {
        this.appealInputForm.orgName = label
      }
    },
    toggele(data) { // 显示此窗口或隐藏
      if (this.dialogFormVisible) { // 隐藏
        this.dialogFormVisible = false
      } else { // 显示
        this.dialogFormVisible = true
      }

      if (data && data != null) { // 修改打开form
        this.$nextTick(function() {
          this.appealInputForm = data
          //* ***file begin */
          this.appealInputForm.fileParamPaDocId = this.appealInputForm.explainId
          /** **file end */
        })

        const explainId = data.explainId
        this.onLoadAppealDetail(explainId)
      } else { // 新增打开form
        //* ***file begin */
        if (this.dialogFormVisible === true) {
          const uuid = createUniqueString()
          this.appealInputForm.fileParamPaDocId = uuid
        }
        /** **file end */
      }
    },
    onCancel() { // 取消
      this.toggele()
      this.resetFormData()
    },
    onSubmit() { // 保存
      var formData = this.appealInputForm
      this.$refs.appealInputForm.validate((valid) => {
        if (valid) {
          this.$emit('submitFunc', formData)
          this.dialogFormVisible = false
          // this.$nextTick(function() {
          //   this.resetFormData()
          // })
        } else {
          return false
        }
      })
    },
    onDetailDelete(index, row) {
      // row.edit = true
      this.appealInputForm.attendanceAppealDetailList.splice(index, 1)
    },
    onAddDetail(data) {
      var dataLength = data.length
      while (dataLength--) {
        this.appealInputForm.attendanceAppealDetailList.push(data[dataLength])
      }
    },
    onAttenceSelect() { // 选择考勤记录
      this.$refs.appealInputForm.validate((valid) => {
        if (valid) {
          this.$refs.attenceExceptionSelector.toggele(this.appealInputForm)
        } else {
          return false
        }
      })
    },
    onLoadAppealDetail(explainId) { // 加载申诉明细
      appealDetailList(explainId).then(response => {
        this.appealInputForm.attendanceAppealDetailList = response.data
      })
    },
    closeDialog() {

    },
    resetFormData() {
      const appealDetail = this.appealInputForm.attendanceAppealDetailList
      if (appealDetail != null && appealDetail) {
        this.appealInputForm.attendanceAppealDetailList.splice(0, appealDetail.length)
      }

      this.$refs['appealInputForm'].resetFields()
      this.appealInputForm = {
        bizTravelId: '',
        ouId: '',
        orgCode: '',
        orgName: '',
        explainId: '',
        explainCode: '',
        periodCode: '',
        empId: '',
        empCode: '',
        empName: '',
        fileParamPaDocId: '',
        attendanceAppealDetailList: []
      }
      this.appealInputForm.orgName = ''
      this.$refs.orgSelectRef.clearHandle()
    }
  }
}
</script>

<style>
/* .el-date-picker{
  width: 80%
} */
</style>
